<template>
	<view>
		<u-index-list customNavHeight="100%" :indexList="indexList">
			<view slot="header" class="list">
				<view class="list__item">
					<view class="list__item__p">热门品类</view>
					<view style="display: block;">
						<view class="list__item__p__li" v-for="(item, index) in  6" :key="index" style="width: 20%;">
							<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle" width="50px" height="50px" style="margin: 0 auto;"></u--image>
							<text class="list__item__span" style="margin-top: 10px;">灭火车</text>
						</view>
						<view style="clear: both;"></view>
					</view>
				</view>
		
				<view class="list__item">
					<view class="list__item__p">猜你喜欢</view>
					<view>
						<u-scroll-list	:indicator="false">
							<view 
								class="list-item"
								v-for="(item, index) in likesScrollList" 
								:key="index">
								<view style="width: 48px;height: 48px;">
									<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle" width="50px" height="50px"></u--image>
								</view>
								<view class="list-item-scroll">
									<text class="p1">{{item.name}}</text>
									<text class="p2">￥{{item.price}}</text>
									<text class="p3">
										<u-rate active-color="#F6C420" readonly :count="item.star" v-model="item.star"></u-rate>
									</text>
								</view>
							</view>
						</u-scroll-list>
					</view>
				</view>
				<u-line></u-line>
			</view>
			<view class="list__item__p" style="margin-top: 15px;">字母筛选</view>
			<template v-for="(item, index) in itemArr">
				
				<u-index-item :key="index">
					<!-- #ifndef APP-NVUE -->
					<u-index-anchor :text="indexList[index]"></u-index-anchor>
					<!-- #endif -->
					<view class="list" v-for="(item1, index1) in item" :key="index1">
						<view class="list__item">
							<image class="list__item__avatar" :src="item1.url"></image>
							<text class="list__item__user-name">{{item1.name}}</text>
						</view>
						<u-line></u-line>
					</view>
				</u-index-item>
			</template>
			<view slot="footer" class="u-safe-area-inset--bottom">
				<text class="list__footer">共305位好友</text>
			</view>
		</u-index-list>
	</view>

</template>

<script>
	const indexList = () => {
		const indexList = []
		const charCodeOfA = 'A'.charCodeAt(0)
		// indexList.push("↑")
		// indexList.push("☆")
		for (let i = 0; i < 26; i++) {
			indexList.push(String.fromCharCode(charCodeOfA + i))
		}
		indexList.push('#')
		return indexList;
	}
	export default {
		data() {
			return {
				likesScrollList: [
					{name: '北斗信...', price: "123.00", star: '5'},
					{name: '北斗号...', price: "123.00", star: '5'},
					{name: '北斗号...', price: "123.00", star: '5'},
				],
				indexList: [],
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				],
				names: ["勇往无敌", "疯狂的迪飙", "磊爱可", "梦幻梦幻梦", "枫中飘瓢", "飞翔天使",
					"曾经第一", "追风幻影族长", "麦小姐", "胡格罗雅", "Red磊磊", "乐乐立立", "青龙爆风", "跑跑卡叮车", "山里狼", "supersonic超"
				]
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.indexList = indexList()
			})
		},
		computed: {
			itemArr() {
				return this.indexList.map(item => {
					const arr = []
					for (let i = 0; i < 10; i++) {
						arr.push({
							name: this.names[uni.$u.random(0, this.names.length - 1)],
							url: this.urls[uni.$u.random(0, this.urls.length - 1)]
						})
					}
					return arr
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-index-anchor {
		height: 32px !important;
		background: linear-gradient( 90deg, #F7F8FA 0%, #FFFFFF 100%);
		border-radius: 0px 0px 0px 0px;
		font-size: 16px !important;
		color: #2E3033 !important;
		border: none !important;
		box-shadow: none !important;
		padding-left: 0 !important;
	}
	::v-deep .u-index-anchor__text {
		font-size: 16px !important;
		color: #2E3033 !important;
	}
</style>
<style lang="scss">
	.list {
		
		&__item {
			// @include flex;
			display: block;
			padding: 6px 12px;
			align-items: center;
			
			&__avatar {
				height: 35px;
				width: 35px;
				border-radius: 3px;
			}
			
			&__user-name {
				font-size: 16px;
				margin-left: 10px;
				color: $u-main-color;
			}
			
			&__p {
				font-weight: normal;
				font-size: 16px;
				color: #2E3033;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-bottom: 10px;
				
				&__li {
					display: inline-block;
					width: 20%;
					float: left;
				}
			}
			
			&__span {
				font-weight: normal;
				font-size: 14px;
				color: #2E3033;
				text-align: center;
				font-style: normal;
				text-transform: none;
				display: inline-block;
				text-align: center;
			}
			
			
		}
		
		&__footer {
			color: $u-tips-color;
			font-size: 14px;
			text-align: center;
			margin: 15px 0;
		}
		
		.list-item {
			width: 150px;
			height: 46px;
			background: #FFFFFF;
			border-radius: 5px 5px 5px 5px;
			border: 1px solid rgba(46,48,51,0.1);
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			padding: 10px 5px;
			margin-right: 10px;
			
			.list-item-scroll {
				flex: 1;
				box-sizing: border-box;
				margin-left: 5px;
				
				
				.p1 {
					font-weight: normal;
					font-size: 14px;
					color: #2E3033;
					text-align: left;
					font-style: normal;
					text-transform: none;
					display: block;
				}
				.p2 {
					font-weight: normal;
					font-size: 12px;
					color: #FF0000;
					text-align: left;
					font-style: normal;
					text-transform: none;
					display: block;
				}
				.p3 {
					font-weight: normal;
					font-size: 10px;
					color: #F6C420;
					text-align: left;
					font-style: normal;
					text-transform: none;
					display: block;

				}
			}
		}
	}
</style>
